<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<style type="text/css">
			* {
				margin: 0px;
				list-style-type: none;
			}

			div {
				width: 800px;
				height: 50px;
				border: #ADFF2F solid 1px;
				background-color: antiquewhite;
			}

			li {
				float: left;
				height: 50px;
				line-height: 50px;
				padding: 0px 20px;
			}

			.cur {
				color: #ff7a70;
			}

			.con {
				display: none;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>秒杀</li>
				<li>优惠券</li>
				<li>PLUS会员</li>
				<li>品牌闪购</li>
				<li>拍卖</li>
				<li>京东家电</li>
				<li>京东超市</li>
			</ul>
		</div>
		<div>
			<section class="con">秒杀</section>
			<section class="con">优惠券</section>
			<section class="con">PLUS会员</section>
			<section class="con">品牌闪购</section>
			<section class="con">拍卖</section>
			<section class="con">京东家电</section>
			<section class="con">京东超市</section>
		</div>
		<script type="text/javascript">
			$("li").click(function() {
				$(this).addClass('cur').siblings().removeClass('cur');
				$('.con').eq($(this).index()).show(1000).siblings().hide(1000);
			})
			/* var li = document.querySelectorAll("li");
			var con = document.querySelectorAll(".con");
			for (var i = 0; i < li.length; i++) {
				li[i].setAttribute("index", i);
				li[i].onmouseover = function() {
					for (var j = 0; j < li.length; j++) {
						li[j].className = "";
					}
					this.className = "cur";
					var index = this.getAttribute("index");
					for (var n = 0; n < con.length; n++) {
						con[n].style.display = "none";
					}
					con[index].style.display = "block";
				}
			} */
		</script>

	</body>
</html>
